<template>
  <div class="row">
    <!--    <div class="list-group">-->
    <!--      <router-link to="/hero" class="list-group-item">首页</router-link>-->
    <!--      <router-link to="/zb" class="list-group-item">库存管理</router-link>-->
    <!--      <router-link to="/jn" class="list-group-item">订单管理</router-link>-->
    <!--      <router-link to="/jn" class="list-group-item">仓库管理</router-link>-->
    <!--      <router-link to="/jn" class="list-group-item">系统管理</router-link>-->
    <!--    </div>-->
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item index="/home" >
            <i class="el-icon-menu" ></i>
            <span slot="title">首页</span>
          </el-menu-item>


          <el-menu-item index="/admin">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>库存管理</span>
            </template>
          </el-menu-item>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">订单管理</span>
            </template>
            <el-menu-item index="/HelloWorld">订单列表</el-menu-item>
            <el-menu-item index="3-2">订单导入</el-menu-item>
            <el-menu-item index="3-2">售后订单</el-menu-item>
          </el-submenu>


          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-goods"></i>
              <span>仓库管理</span>
            </template>
            <el-submenu index="4-1">
              <template slot="title">出入库</template>
              <el-menu-item index="4-1-1">入库</el-menu-item>
              <el-menu-item index="4-1-2">手动出库</el-menu-item>
            </el-submenu>
            <el-submenu index="4-3">
              <template slot="title">SKU管理</template>
              <el-menu-item index="4-3-1">新增商品</el-menu-item>
              <el-menu-item index="4-3-2">商品详情</el-menu-item>
              <el-menu-item index="4-3-3">库存调整</el-menu-item>
            </el-submenu>
          </el-submenu>



          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-submenu index="5-1">
              <template slot="title">管理员管理</template>
              <el-menu-item index="5-3-1">管理员列表</el-menu-item>
              <el-menu-item index="5-3-2">权限管理</el-menu-item>
              <el-menu-item index="5-3-3">添加管理员</el-menu-item>
            </el-submenu>
            <el-submenu index="5-2">
              <template slot="title">仓库管理</template>
              <el-menu-item index="5-2-1">仓库列表</el-menu-item>
              <el-menu-item index="5-2-2">添加仓库</el-menu-item>
            </el-submenu>
            <el-submenu index="5-3">
              <template slot="title">平台管理</template>
              <el-menu-item index="5-3-1">平台列表</el-menu-item>
              <el-menu-item index="5-3-2">添加平台</el-menu-item>
            </el-submenu>
            <el-submenu index="5-4">
              <template slot="title">系统任务</template>
              <el-menu-item index="5-4-1">清理缓存</el-menu-item>
              <el-menu-item index="5-4-2">自动抓取库存</el-menu-item>
            </el-submenu>
          </el-submenu>

        </el-menu>
      </el-col>

    </el-row>


  </div>
</template>


<script>
  export default {
    name: 'MyAside',
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },

  }
</script>


<style>
  /* 此时的样式router-link-active需要和bootstrap的active样式一致 */
  /* 添加.router-link-exact-active类，是为了提高权重 */
  .list-group-item.router-link-exact-active,
  .list-group-item.router-link-exact-active:focus,
  .list-group-item.router-link-active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
  }
</style>
